	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  width: 100%;
	  height: 100%;
	}

	body {
	  background-color: #DCDFE6;
	}

	.box {
	  width: 300px;
	  height: 300px;
	  top: 50%;
	  left: 50%;
	  margin-top: -150px;
	  margin-left: -150px;
	  position: relative;
	  animation: move 2s infinite linear;
	}

	.black0 {
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  background-color: black;
	}

	.white0 {
	  width: 150px;
	  height: 300px;
	  background-color: white;
	  border-top-right-radius: 150px;
	  border-bottom-right-radius: 150px;
	  position: absolute;
	  top: 0;
	  right: 0;
	}

	.black1 {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  background-color: black;
	  position: absolute;
	  top: 0;
	  left: 75px;
	}

	.white1 {
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  background-color: white;
	  position: absolute;
	  top: 150px;
	  left: 75px;
	}

	.white2 {
	  width: 30px;
	  height: 30px;
	  border-radius: 50%;
	  background-color: white;
	  position: absolute;
	  top: 60px;
	  left: 150px;
	}

	.black2 {
	  width: 30px;
	  height: 30px;
	  border-radius: 50%;
	  background-color: black;
	  position: absolute;
	  bottom: 60px;
	  left: 150px;
	}

	@keyframes move {
	  from {
	    transform: rotateZ(0deg);
	  }

	  to {
	    transform: rotateZ(360deg);
	  }
	}